<script setup lang="ts">
import { ref } from "vue";
import { useRole } from "./hook";
import { getPickerShortcuts } from "../../utils";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { hasPerms } from "@/utils/auth";
import "vue-json-pretty/lib/styles.css";
import VueJsonPretty from "vue-json-pretty";

import Refresh from "~icons/ep/refresh";

defineOptions({
  name: "OperationLog"
});

const formRef = ref();
const tableRef = ref();

const formatJson = (value?: string) => {
   if (!value) return {}
  try {
    return typeof value === 'string' ? JSON.parse(value) : value
  } catch {
    return { raw: value }
  }
};

const {
  form,
  loading,
  columns,
  dataList,
  pagination,
  onSearch,
  resetForm,
  handleSizeChange,
  handleCurrentChange,
  handleSelectionChange
} = useRole(tableRef);
</script>

<template>
  <div v-if="hasPerms(['Operation:Log:View:Page'])" class="main">
    <el-form
      ref="formRef"
      :inline="true"
      :model="form"
      class="search-form bg-bg_color w-full pl-8 pt-[12px] overflow-auto"
    >
      <el-form-item label="所属实体" prop="entity">
        <el-input
          v-model="form.entity"
          placeholder="请输入所属实体"
          clearable
          class="w-[150px]!"
        />
      </el-form-item>
      <el-form-item label="操作人员" prop="operator">
        <el-input
          v-model="form.operator"
          placeholder="请输入操作人员"
          clearable
          class="w-[150px]!"
        />
      </el-form-item>
      <el-form-item label="操作状态" prop="operation">
        <el-select
          v-model="form.operation"
          placeholder="请选择"
          clearable
          class="w-[150px]!"
        >
          <el-option label="创建" value="Create" />
          <el-option label="修改" value="Update" />
          <el-option label="删除" value="Delete" />
        </el-select>
      </el-form-item>
      <el-form-item label="操作时间" prop="dateTime">
        <el-date-picker
          v-model="form.dateTime"
          :shortcuts="getPickerShortcuts()"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期时间"
          end-placeholder="结束日期时间"
          class="w-[350px]!"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          :icon="useRenderIcon('ri:search-line')"
          :loading="loading"
          @click="onSearch"
        >
          搜索
        </el-button>
        <el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)">
          重置
        </el-button>
      </el-form-item>
    </el-form>

   <PureTableBar
  title="审计日志"
  :columns="columns"
  @refresh="onSearch"
>
  <template v-slot="{ size, dynamicColumns }">
    <pure-table
      ref="tableRef"
      row-key="id"
      align-whole="center"
      table-layout="auto"
      :loading="loading"
      :size="size"
      adaptive
      :adaptiveConfig="{ offsetBottom: 108 }"
      :data="dataList"
      :columns="dynamicColumns"
      :pagination="{ ...pagination, size }"
      :header-cell-style="{
        background: 'var(--el-fill-color-light)',
        color: 'var(--el-text-color-primary)'
      }"
      @selection-change="handleSelectionChange"
      @page-size-change="handleSizeChange"
      @page-current-change="handleCurrentChange"
    >

      <!-- ✅ 展开行内容插槽 -->
      <template #expand="{ row }">
        <el-descriptions :column="1" border size="small">
          <el-descriptions-item label="主键">
            <vue-json-pretty
               :data="formatJson(row.primaryKey)"
               :deep="3"
               :show-double-quotes="true"
               :show-length="true"
               :show-icon="true"
               :show-line-number="true"
               :editable="true"
               :editable-trigger="'click' as any"
             />
          </el-descriptions-item>
          <el-descriptions-item v-if="row.modifiedProperties" label="修改字段">
           <vue-json-pretty
               :data="formatJson(row.modifiedProperties)"
               :deep="3"
               :show-double-quotes="true"
               :show-line="true"
               :show-length="true"
               :show-icon="true"
               :show-line-number="true"
               :editable="true"
               :editable-trigger="'click' as any"
             />
          </el-descriptions-item>
          <el-descriptions-item v-if="row.previousValues" label="旧值">
            <vue-json-pretty
               :data="formatJson(row.previousValues)"
               :deep="3"
               :show-double-quotes="true"
               :show-line="true"
               :show-length="true"
               :show-icon="true"
               :show-line-number="true"
               :editable="true"
               :editable-trigger="'click' as any"
             />
          </el-descriptions-item>
          <el-descriptions-item label="新值">
            <vue-json-pretty
               :data="formatJson(row.newValues)"
               :deep="3"
               :show-double-quotes="true"
               :show-line="true"
               :show-length="true"
               :show-icon="true"
               :show-line-number="true"
               :editable="true"
               :editable-trigger="'click' as any"
             />
          </el-descriptions-item>
        </el-descriptions>  
      </template>
    </pure-table>
  </template>
</PureTableBar>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-dropdown-menu__item i) {
  margin: 0;
}

.main-content {
  margin: 24px 24px 0 !important;
}

.search-form {
  :deep(.el-form-item) {
    margin-bottom: 12px;
  }
}
.json-block {
  white-space: pre-wrap;
  background-color: #1e1e1e;
  color: #dcdcdc;
  padding: 10px;
  border-radius: 6px;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.5;
}

.old-value {
  background-color: #2b1b1b;
  color: #ffaaaa;
  border: 1px solid #ff7777;
}

.new-value {
  background-color: #132b1b;
  color: #aaffaa;
  border: 1px solid #77ff77;
}

</style>
